<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#all{
				width: 550px;
				height: 550px;
				padding: 30px;
				background: white;
				border: #D3D3D3 2px solid;
			}
			.box{
				width: 480px;
				height: 500px;
				background: #6495ED;
				border-radius: 10px;
				text-align: center;
				padding: 20px;
				
			}
			.box1{
				width: 450px;
				height: 40px;
				background: white;
				margin-left: 14px;
				margin-top: 0px;
				border-radius: 10px;
				padding-top: 12px;
			}
			.box2{
				width: 450px;
				height: 40px;
				background: white;
				margin-left: 14px;
				margin-top: 20px;
				border-radius: 10px;
				padding-top: 12px;
			}
			.box3{
				width: 450px;
				height: 40px;
				background: white;
				margin-left: 14px;
				margin-top: 20px;
				border-radius: 10px;
				padding-top: 12px;
			}
			.box4{
				width: 450px;
				height: 40px;
				background: white;
				margin-left: 14px;
				margin-top: 20px;
				border-radius: 10px;
				padding-top: 12px;
			}
			.box5{
				width: 450px;
				height: 40px;
				background: white;
				margin-left: 14px;
				margin-top: 20px;
				border-radius: 10px;
				padding-top: 12px;
			}
			.box6{
				width: 450px;
				height: 40px;
				background: white;
				margin-left: 14px;
				margin-top: 20px;
				border-radius: 10px;
				text-align: center;
				padding-top: 12px;
			}
			.box7{
				width: 450px;
				height:40px;
				background: white;
				margin-left: 14px;
				margin-top: 20px;
				border-radius: 10px;
				text-align: center;
				padding-top: 12px;
			}
			input{
				margin-left: 100px;
			}
			button{
				margin-top: 5px;
			}
			
			.box2:hover{
				
			}
		</style>
	</head>

	<body>
		<div id="all">
		
		<div class="box">
		<from><div class="box1">
			    <label>用户昵称:</label><input type="text" placeholder="请输入用户名">
			</div>
			<div class="box2">
				<label>Email:</label><input type="email" placeholder="example@domain.com">
			</div>
			<div class="box3">
				<label>工作年龄:</label><input type="range" ><output for="age" id="show"></output>
			</div>
			<div class="box4">
				<label>年龄:</label><input type="number" placeholder="your age">
			</div>
			<div class="box5">
				<label>出生日期:</label><input type="date" >
			</div>
			<div class="box6">
				<label>个人主页:</label><input type="url" >
				<datalist>
					<option label="Google" value="https://hao.360.com"></option>
					<option label="Google" value="http://www.163.com"></option>
					<option label="Google" value="http://www.163.com"></option>
				</datalist>
			</div>
			<div class="box7">
				<label>获取颜色值:</label><input type="color">
			</div>
			<button>注册</button>
		</from>
		</div>
		
		</div>
	</body>

</html>